<template>
  <div class="edit-box">
    <div class="edit-header">
      <el-input class="title-input" v-model="title" placeholder="请输入标题" />
      <el-button @click="changeVidible"> 发布 </el-button>
      <el-avatar shape="square" :src="userInfo.img"></el-avatar>
    </div>
    <div class="edit-body">
      <vue-wangeditor id="editor" v-model="value" width="100%" ref="edit" />
    </div>
    <!-- 类型 -->
    <el-dialog :visible="visible">
      <p>文章类型：</p>
      <el-cascader v-model="type" :options="options"></el-cascader>

      <p>文章描述：</p>
      <el-input v-model="info" />

      <p>请上传文章封面：</p>
      <el-upload
        action="/api/upload"
        list-type="picture-card"
        :on-success="fileSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>

      <!-- 弹框页脚的插槽 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeVidible">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vueWangeditor from "vue-wangeditor";
import { mapState } from "vuex";
import { apigetArticleType, apiSendArticle } from "@/api";
export default {
  components: {
    vueWangeditor,
  },
  data() {
    return {
      visible: false,
      title: "", // 文章的标题
      value: "", // 富文本输入的内容
      type: "", // 文章类型
      options: [], // 文章类型的数据
      info: "", // 文章的描述
      img: "", // 文章的封面图
    };
  },
  created() {
    // 获取文章类型
    apigetArticleType().then((res) => {
      const changeData = (arr) => {
        return arr.map((item) => {
          return {
            ...item,
            value: item.towtype || item.type,
            label: item.title,
            children: item.children && changeData(item.children),
          };
        });
      };

      this.options = changeData(res.data);

      console.log(this.options);
    });
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    send() {
      // 整理要发生给后端的数据
      const data = {
        title: this.title,
        content: this.$refs.edit.getHtml(), // 富文本中输入的内容
        classify: this.type[0], // 一级选择器的值
        classifytow: this.type[1], // 二级选择器的值
        info: this.info,
        img: this.img,
      };

      // 发布文章
      apiSendArticle(data).then((res) => {
        this.$message({
          type: "success", // success error warning
          message: "发布成功",
          duration: 2000,
        });

        // 发布成功跳转到首页
        this.$router.push("/");
      });
    },
    changeVidible() {
      this.visible = !this.visible;
    },
    // 文章的封面图
    fileSuccess(res) {
      this.img = res.data.url;
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.edit-header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccc;
  justify-content: space-between;
  padding: 0 20px;
}
.title-input {
  width: 85%;
}
.edit-body {
  flex: 1;
}
</style>